<template>
  <div class="loginPage">
    <div class="loginBox">
      <img src="../../assets/logo.png">
      <el-input v-model="input" placeholder="请输入账号" class="input"></el-input>
      <el-input v-model="parssword" placeholder="请输入账号" class="input"></el-input>
      <el-button type="primary" class="loginBtn" @click="login">登录</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      input: '',
      parssword: ''
    }
  },
  watch: {
    input (v) {
      console.log(this.input)
    },
    parssword (p) {
      console.log(this.parssword)
    }
  },
  methods: {
    login () {
      if (this.input === 'admin' && this.parssword === '123456') {
        this.$message({
          message: '登录成功',
          type: 'success'
        })
        this.$router.replace('/index')
      } else {
        this.$message.error('登录失败')
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .loginPage{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .loginBox{
    text-align: center;
    padding: 20px;
    width: 300px;
  }
  .loginBox img{

  }
  .loginBox .input{
    margin-top: 10px;
  }
  .loginBox .loginBtn{
    width: 100%;
    margin-top: 20px;
  }
</style>
